<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>表单组和表单网格</title>
</head>
<body>
    <form >
        <h2>表单组</h2>
        <!-- .form-group表单组，鼓励使用表单组来明确语义，boostsrap还会给表单组添加下外边距 -->
        <div class="form-group">
            <label for="cnname">中文名</label>
            <input type="text" class="form-control" id="cnname" placeholder="中文名">
        </div>
        <div class="form-group">
            <label for="enname">英文名</label>
            <input type="text" class="form-control" id="enname" placeholder="英文名">
        </div>
    </form>
    <hr>
    <form>
        <h2>表单网格</h2>
        <!-- 使用网格系统实现表单元素的水平排版 -->
        <div class="row">
            <div class="col">
                <input type="text" class="form-control" id="cnname" placeholder="中文名">
            </div>
            <div class="col">
                <input type="text" class="form-control" id="enname" placeholder="英文名">
            </div>
        </div>
        <h2>表单行</h2>
        <!-- 使用.form-row来创建表单行，格子之间的距离会更小，使表单更紧凑 -->
        <div class="form-row">
            <div class="col">
                <input type="text" class="form-control" id="cnname" placeholder="中文名">
            </div>
            <div class="col">
                <input type="text" class="form-control" id="enname" placeholder="英文名">
            </div>
        </div>
        <h2>水平表单</h2>
        <!-- 一行刚好是一个表单组，所以表单组可以作为行 -->
        <div class="row form-group">
            <!-- label可以看作一个格子 ，调整文本内容可以使用css或者减小label占用的列数-->
            <label for="cnname" class="col-sm-2 col-form-label" style="text-align: right;">中文名</label>
            <!-- input需要使用div来包裹 -->
            <div class="col-sm-10">
                <input type="text" class="form-control" id="cnname" placeholder="中文名">
            </div>
        </div>
        <div class="row form-group">
            <label for="enname" class="col-sm-2 col-form-label" style="text-align: right;">英文名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="enname" placeholder="英文名">
            </div>
        </div>
    </form>
    
</body>
</html>